<template>
    <div class="login-page">
        <div>
            <div class="login-main">
                <div class="a-pic-wrap">
                    <div class="a-pic"></div>
                </div>
                <div class="input-wrap">
                    <el-form ref="loginForm" :model="loginForm" :rules="rules">
                        <div class="each-input">
                            <el-form-item prop="uname">
                                <el-input v-model="loginForm.uname" placeholder="账号"></el-input>
                            </el-form-item>
                        </div>
                        <div class="each-input">
                            <el-form-item prop="upsw">
                                <el-input v-model="loginForm.upsw" type="password" placeholder="密码"></el-input>
                            </el-form-item>
                        </div>
                        <div class="btn">
                            <el-form-item>
                                <el-button type="primary" @click="sub('loginForm')">登录</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "login",
        data() {
            return {
                loginForm: {
                    uname: "",
                    upsw: ""
                },
                rules: {
                    uname: [
                        {
                            required: true,
                            message: '请输入账号'
                        }
                    ],
                    upsw: [
                        {
                            required: true,
                            message: '请输入密码'
                        }
                    ]
                },
                allowSub: true
            }
        },
        methods: {
            sub: function(formname) {
                let that = this;
                that.$refs[formname].validate((valid) => {
                    if(valid) {
                        if(that.allowSub) {
                            that.allowSub = false;
                            that.api.post({
                                url: "login",
                                data: {
                                    username: that.loginForm.uname,
                                    password: that.loginForm.upsw
                                },
                                callback: function(data) {
                                    if(data.code == 0) {
                                        if(true) {
                                            if(data.data) {
                                                that.api.setCookie("token", data.data);
                                                that.api.setCookie("tel", that.loginForm.iuser);
                                            }
                                            //window.location.href = "/#/" + that.fr;
                                            //that.$router.go(0);
                                            window.location.href = "/#/balance";
                                        }
                                    } else {
                                        that.$message({
                                            showClose: true,
                                            message: data.msg,
                                            type: 'error'
                                        });
                                        that.allowSub = true;
                                    }
                                },
                                errorcall: function() {
                                    alert("Error");
                                    that.allowSub = true;
                                }
                            });
                        }
                    }
                });
            }
        },
        beforeMount() {
            this.api.get({
                url: "loginpage?f=login",
                data: {},
                callback: function(data) {
                    if(data && (data.code == 0)) {
                        window.location.href = "/#/balance";
                    }
                }
            });
        }
    }
</script>
<style>
    .login-page .login-main {
        width: 360px;
        position: relative;
        margin: 80px auto;
        z-index: 1000;
        background-color: #ffffff;
        border: 1px solid #cfd6de;
        box-shadow: 0 2px 2px #cfd6de;
    }
    .login-page .a-pic-wrap {
        border: 1px solid #ffffff;
        width: 100px;
        height: 100px;
        margin: 29px auto;
        overflow: hidden;
        position: relative;
    }
    .login-page .a-pic {
        width: 100px;
        height: 100px;
        background-image: url(../../assets/imgs/pic.jpg);
    }
    .login-page .input-wrap {
        padding: 0px 30px;
    }
    .login-page .btn {
        text-align: center;
    }
    .login-page button {
        width: 100px;
    }
    .login-page .each-input {
        margin-bottom: 30px;
    }
</style>